<template>
    <div class="shopcart">
       <myheader title="购物车" :back="true" :more="false"></myheader>
        <div class="mui-card" v-for="(item,index) in shopcartGoods" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <span :class="item.selected?'active':'radio'" @click="changestatus(item.id)"></span>
                    <img :src="item.img" alt="" @click="goToGoodsinfo(item.id)">
                    <div class="right">
                        <h4 @click="goToGoodsinfo(item.id)">{{item.title}}</h4>
                        <div class="control">
                            <span class="price">{{item.price | priceFormat}}</span>
                            <div class="mui-numbox">
                                <button class="mui-btn mui-btn-numbox-minus" type="button" @click="decrease(item)">-</button>
                                <input class="mui-input-numbox" type="number" :value="item.count"/>
                                <button class="mui-btn mui-btn-numbox-plus" type="button" @click="increase(item)">+</button>
                            </div>
                            <span class="button" @click="deletegoods(index)">&times;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="header">猜你喜欢</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner goodslist">
                    <goodslist></goodslist>
                </div>
            </div>

        </div>
        <account></account>
    </div>
</template>

<script>
    import myheader from '../components/header'
    import account from '../views/goods/account'
    import goodslist from '../views/goods/googslist'
    import {Toast,MessageBox} from 'mint-ui'

    export default {
        name: "shopcart",
        components:{
            myheader,
            account,
            goodslist
        },
        computed:{ //写计算属性，要养成一个习惯，就是每一个方法，都必须有一个return,
                    // 计算属性定义出来的属性没有必要在去data中定义
            shopcartGoods(){ //从store中获取购物车的商品信息
                return this.$store.state.shopcartData
            },

        },
        methods:{
            changestatus(id){//此方法用来,调用store中的mutation中的方法，修改state中商品选中状态
                this.$store.commit('CHANGE_STATUS',id)
            },
            increase(item){ //此方法用来,调用store中的mutation中的方法，修改state中商品数量--增加

                if (item.count>=item.stock){
                    Toast('您选购的数量太多了，超出我们的库存了')
                }
                this.$store.commit('INCREASE',item)

            },
            decrease(item){//此方法用来,调用store中的mutation中的方法，修改state中商品数量--减少
                if (item.count<=1){
                    Toast('亲！您最少购买一件哦~')
                }
                this.$store.commit('DECREASE',item)
            },
            deletegoods(index){ //此方法用来,调用store中的mutation中的方法,删除state商品数组中的某个商品
                MessageBox.confirm('您确定要移除这件商品吗？','移除商品').then(action=>{//点击确定按钮执行下面的操作
                    this.$store.commit('DELETEGOODS',index)
                },cancel=>{//点击取消按钮将执行这里的操作
                    return
                })

            },
            goToGoodsinfo(id){//使用编程式导航的方式，跳转到商品详情界面
                this.$router.push('home/goodsinfo/'+id)
            }
        }
    }
</script>

<style scoped lang="scss">
@import "../assets/sassstyle.scss";
.shopcart{
    background-color: #EEEEEE;
    height: 100%;
    padding-bottom: 32px;

    .mui-card{
        position: relative;
        .header{
            width: 100%;
            height: 50px;
            background-color: #FFFFFF;
            font-size: 26px;
            color: #333333;
            position: absolute;
            top: 0;
            z-index: 10;
            padding: 15px;
        }
            .goodslist{
                padding: 0;
            }
    }

    .mui-card-content-inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .radio{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #CCCCCC;
        }
        .active{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
           background-color:$theme-color ;
        }
        img{
            width: 60px;
        }
        .right{
            width: 70%;
            h4{
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 15px;

            }
            .control{
                display: flex;
                justify-content: space-around;
                align-items: center;
                .price{
                    color: red;
                    font-size: 18px;
                }
            }
            .mui-numbox{
                width: 80px;
                height: 28px;
                padding: 0 25px 0 25px;
            }
            .mui-numbox [class*=btn-numbox]{
                width: 25px;
            }
            .button{
                display: inline-block;
                width: 18px;
                height: 18px;
                color: white;
                background-color: red;
                border-radius: 50%;
                text-align: center;
                line-height: 18px;
            }
        }
    }
}

</style>
